<template>
  <BaseText
    class="base-price"
    :class="cssClass"
    :size="textSize"
    :is-bold="isBold"
  >
    <slot name="before"></slot>
    <span class="base-price__main">
      <span v-if="sign" class="base-price__sign">{{ sign }}</span>
      <span class="base-price__price">{{ thePrice }}</span>
    </span>
    <slot name="after"></slot>
  </BaseText>
</template>

<script setup>
import { computed } from "vue";
import { formatPrice } from "@/utils/priceUtils.js";
import { getSizeClass, isSizeKey } from "../utils/cssUtils";

let props = defineProps({
  price: [String, Number],
  sign: {
    type: String,
    default: "¥",
  },
  size: String,
  isBold: {
    type: Boolean,
    default: true,
  },
  isFake: Boolean,
});

let thePrice = computed(() => {
  return formatPrice(props.price);
});

let cssClass = computed(() => {
  let result = [];

  result.push(getSizeClass(props.size, "base-price--"));
  result.push({
    "base-price--fake": props.isFake,
  });

  return result;
});

let textSize = computed(() => {
  return isSizeKey(props.size) ? undefined : props.sign;
});
</script>

<style lang="scss" scoped>
.base-price {
  &__sign {
    margin-right: calc(var(--dx-gap-xs) / 2);
  }

  &--fake {
    font-weight: normal;
    font-size: var(--dx-font-size-sm);
    color: var(--dx-color-text-soft);
    text-decoration: line-through;

    .base-price__sign {
      margin-right: calc(var(--dx-gap-xs) / 3);
    }
  }

  @each $size in sm, md, lg, xl {
    &--#{$size} {
      font-size: var(--dx-price-size-#{$size});
    }
  }

  &+& {
    margin-left: var(--dx-gap-xs);
  }
}
</style>
